<template>
	<div class="logo">
		<el-image style="width: 30px; height: 30px" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
		<h4 v-show="isCollapse">{{ title }}</h4>
	</div>
	<p class="home-title">首页</p>
	<!-- 菜单组件 -->
	<!-- <Menu :isCollapse="isCollapse"></Menu> -->
	<Menu></Menu>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue'
import Menu from '@/components/Menu/index.vue'

const title = ref<string>(import.meta.env.VITE_APP_TITLE)
// defineProps<{ isCollapse: boolean }>() // 方法一: 接收参数isCollapse, 继续传递给Menu组件

// 方法二: 监听透传属性，赋值给响应式属性
// import { useAttrs } from 'vue'
// const attrs = useAttrs()
// const isCollapse = ref<any>(attrs.isCollapse)
// watch(()=>attrs.isCollapse, () => {isCollapse.value = attrs.isCollapse}, { deep: true })

// 方法三: 直接透传 $attrs.isCollapse

// 方法四: 跨组件通讯
const isCollapse = inject('isCollapse')
</script>

<style scoped lang="scss">
.logo {
	display: flex;
	color: white;
	padding: 2px 20px;
	align-items: center;
	height: 50px;
	h4 {
		margin-left: 10px;
	}
}
.home-title {
	padding-left: 20px;
	color: #b5cbd3;
}
.el-menu {
	border-right: 0;
}
</style>
